<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" :date="data.dates" />

		</div>

		<div class="app-container" v-loading="data.status_top">

			<!-- 概况 -->
			<salestop :item="data.info" />

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<!-- 统计 -->
			<div class="m-2">

				<div class="mb-2 text-right" v-prmis="'sale_orders_exportSaleData'">
					<el-button type="primary" @click="getspread">{{ $t('public.export') }} Excel</el-button>
				</div>

				<el-table :data="data.list" border :header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }" class="w-full">
					<el-table-column prop="machine_id" :label="$t('machine.code')" width="85" />
					<el-table-column prop="machine_name" :label="$t('machine.name')" width="120" />
					<el-table-column prop="sku" :label="$t('eventlog.goods.goods') + 'SKU'" width="160" />
					<el-table-column prop="g_name" :label="$t('machine.goods.name')" width="180" />
					<el-table-column prop="totalSaleQuantity" :label="$t('report.sales.actualVolume')" width="100">
						<template #default="scope">
							{{ scope.row.totalSaleQuantity * 1 || '0' }}
						</template>
					</el-table-column>
					<el-table-column prop="totalPrice" :label="$t('report.sales.actual')" width="100">
						<template #default="scope">
							{{ scope.row.totalPrice * 1 || '0.00' }}
						</template>
					</el-table-column>
					<el-table-column prop="totalDiscountPrice" :label="$t('operateData.discountTotal')" width="85">
						<template #default="scope">
							{{ scope.row.totalDiscountPrice * 1 || '0.00' }}
						</template>
					</el-table-column>
					<el-table-column prop="totalGift" :label="$t('report.sales.gifts')" width="85">
						<template #default="scope">
							{{ scope.row.totalGift * 1 || '0' }}
						</template>
					</el-table-column>
					<el-table-column prop="totalCostPrice" :label="$t('operateData.totalCost')">
						<template #default="scope">
							{{ Number(scope.row.totalCostPrice).toFixed(2) || '0' }}
						</template>
					</el-table-column>
					<el-table-column prop="totalClick" :label="$t('report.grouping.clickCount')" width="85" />
					<el-table-column prop="clickConversionRate" :label="$t('operateData.rate')" width="100" />
					<el-table-column prop="profitAmount" :label="$t('operateData.profit')" width="70" />
					<el-table-column prop="averageRetailPrice" :label="$t('operateData.averagePrice')" width="100" />
					<el-table-column prop="averageCostPrice" :label="$t('operateData.costPrice')" width="100" />
					<el-table-column prop="grossProfitRate" :label="$t('operateData.gross')" />
				</el-table>
				<PageNum :total="data.total" :page="data.salesinfo" @exposeData="current" @fraction="fraction" />
			</div>
		</div>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import salestop from '../common/sales_top.vue';
import { saleDataCollect, saleDataList, exportSaleData } from '@/api/operateData';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
import { getgoodsList } from '@/api/goods'
const dialogExport = ref(false)
let data = reactive({
	status_top: false, // 头部信息加载
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('machine.goods.name'), type: 'defineShop', value: '', select: [], key: 'g_id' },
		{ title: $t('public.date'), type: 'time', value: [], key: 'create_date' },
	],
	list: [], // 列表信息
	info: {}, // 头部信息
	listtime: '', // 列表最后更新时间
	salesinfo: { // 筛选数据
		m_id: '',
		create_date: '',
		g_id: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	dates: []
})
// 获取头部信息
let gettopinfo = () => {
	let info = {
		m_id: data.salesinfo.m_id,
		g_id: data.salesinfo.g_id + '',
		create_date: data.salesinfo.create_date,
		pageNum: data.salesinfo.pageNum
	}
	data.status_top = true
	saleDataCollect(info).then(res => {
		data.status_top = false
		if (res.state == 200) {
			data.info = res.data
			data.info.time = new Date().getTime()
		}
	})

}
let getGoodList = () => {
	let pram = { machine_id: [], sale_check: true }
	getgoodsList(pram).then(res => {
		data.lookup[1].select = res.data
	})
}
getGoodList()
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	data.salesinfo.g_id = data.salesinfo.g_id + ''
	saleDataList(data.salesinfo).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.listtime = new Date().getTime()
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	data.salesinfo.create_date = ''
	if (e.create_date != '') {
		data.salesinfo.create_date = e.create_date[0] + ' ' + '00:00:00' + '~' + e.create_date[1] + ' ' + '23:59:59'
	}
	data.salesinfo.m_id = e.m_id
	data.salesinfo.g_id = e.g_id
	data.salesinfo.page = 1
	data.salesinfo.pageNum = 15
	getlist()
	gettopinfo()
}

// 导出
let getspread = () => {
	let obj = {
		m_id: data.salesinfo.m_id,
		create_date: data.salesinfo.create_date
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportSaleData(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}

			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}

// 页数回调
let current = (e) => {
	data.salesinfo.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.salesinfo.pageNum = e
	getlist()
}
getlist()
gettopinfo()
</script>
